<template>
  <div class="container">
    <div class="box">
      <div class="top">试题录入</div>
      <div class="bto">
        <el-form ref="userForm" :rules="rules" :model="formData">
          <!-- 学科 -->
          <el-form-item label="学科:" prop="subjectID" class="bto-input">
            <el-select
            @change="hebinglist"
              placeholder="请选择"
              style="width: 400px"
              v-model="formData.subjectID">
              <el-option
                v-for="item in depts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- 目录 -->
          <el-form-item label="目录:" prop="catalogID" class="bto-input">
            <el-select
              placeholder="请选择"
              style="width: 400px"
              v-model="formData.catalogID"
            >
              <el-option
                v-for="item in directoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- 企业 -->
          <el-form-item label="企业:" prop="enterpriseID" class="bto-input">
            <el-select
              placeholder="请选择"
              style="width: 400px"
              v-model="formData.enterpriseID" >
              <el-option
                v-for="item in dept"
                :key="item.id"
                :value="item.id"
                :label="item.company"/>
            </el-select>
          </el-form-item>
          <!-- 城市 -->
          <el-form-item label="城市:" prop="province" class="bto-input">
            <el-select
              placeholder="请选择"
              style="width: 198px"
              v-model="formData.province"
              @change="changeProvince">
              <el-option v-for="item in provincesList" :label="item" :key="item" :value="item"/>
            </el-select>
            <el-select
              placeholder="请选择"
              style="width: 198px"
              v-model="formData.city">
              <el-option
                :label="item"
                :value="item"
                v-for="item in cityList"
                :key="item"/>
            </el-select>
          </el-form-item>
          <!-- 方向 -->
          <el-form-item label="方向:" prop="direction" class="bto-input">
            <el-select style="width: 400px" v-model="formData.direction">
              <el-option placeholder="请选择" v-for="item in directionList" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
          <!-- 题型 -->
          <el-form-item label="题型:" prop="questionType" class="bto-input">
            <el-radio-group v-model="formData.questionType">
              <el-radio v-for="item in questionType"
              :key="item.value" :value="item.value"
               :label="item.label">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 难度 -->
          <el-form-item label="难度:" prop="difficulty" class="bto-input">
            <el-radio-group v-model="formData.difficulty" >
              <el-radio v-for="item in difficulty"
              :key="item.value" :value="item.value"
              :label="item.label">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 题干 -->
          <el-form-item label="题干:" prop="question" class="bto-input">
                <!-- 富文本 编辑器 -->
                <quill-editor v-model="formData.question"></quill-editor>
          </el-form-item>
          <!-- 选项 -->
          <el-form-item label="选项" class="bto-input2" v-if="formData.questionType !== '简答' ">
            <!-- 单选 -->
            <el-radio-group v-model="radio" v-if="formData.questionType === '单选'" :style="{ display:'inline-block'}">
              <div v-for="item in formData.options" :key="item.code" class="marBto" :style="{ marginTop:'6px' }">
              <el-radio :label="item.code" style="margin: 0">{{ item.code + '：' }}</el-radio>
              <el-input v-model="item.title" :style="{width:'240px'}"></el-input>
              <!-- 图片上传 -->
              <questionsAvatar></questionsAvatar>
              </div>
            </el-radio-group>
            <!-- 多选 -->
            <el-checkbox-group v-model="checkbox" v-else-if="formData.questionType === '多选'" >
              <div v-for="item in formData.options" :key="item.code" class="marLeft" :style="{ marginTop:'-7px' }">
              <el-checkbox :label="item.code" style="margin: 10px" >{{ item.code + '：' }}</el-checkbox>
              <el-input v-model="item.title" :style="{width:'240px',marginLeft:'-15px'}"></el-input>
              <!-- 图片上传 -->
               <questionsAvatar></questionsAvatar>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <!-- 禁用按钮 -->
          <div class="close" :style="{ marginBottom:'25px'}">
             <el-button type="danger" :disabled="formData.questionType === '单选' ? true : false" v-if="formData.questionType !== '简答'" @click="addoptions">+增加选项与答案</el-button>
          </div>
          <!-- 解析视频 -->
          <el-form-item label="解析视频：" class="bto-input3">
            <questionsVideo v-model="formData.videoURL"></questionsVideo>
            </el-form-item>
          <!-- 答案解析 -->
          <el-form-item label="答案解析:" prop="answer" class="bto-input4">
                <!-- 富文本 编辑器 -->
                <quill-editor v-model="formData.answer" class="quill"></quill-editor>
          </el-form-item>
          <!-- 题目备注 -->
           <el-form-item label="题目备注:" class="bto-input3">
                <el-input type="textarea" v-model="formData.remarks" :style="{ width:'400px', marginLeft:'13px'}"></el-input>
              </el-form-item>
          <!-- 试题标签 -->
          <el-form-item label="试题标签:" class="bto-input5" v-model="formData.tags">
            <el-select placeholder="请选择" :style="{ width:'400px', marginLeft:'15px' }" v-model="formData.tags">
              <el-option v-for="item in scheduleList" :key="item.value" :label="item.tagName" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- 提交 -->
          <el-button type="primary" class="bton" @click="btnOk" >确认提交</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 学科
import { simple } from '@/api/hmmm/subjects'
// 目录
import { simple as simplemulu } from '@/api/hmmm/directorys'
// 企业
import { list } from '@/api/hmmm/companys'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 方向
import { direction } from '@/api/hmmm/constants'
// 试题标签
// import { list as schedules } from '@/api/hmmm/tags'
// 基础题库添加
// 上传图片组件
import questionsAvatar from '../components/questions-avatar.vue'
// 上传视频
import questionsVideo from '../components/questions-viedo.vue'
import { add, update, detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsNew',
  components: {
    quillEditor,
    questionsAvatar,
    questionsVideo
  },
  data () {
    return {
      num: 3,
      // 上传
      imageUrl: '',
      // 单选
      radio: '',
      checkbox: [],
      // 表单
      formData: {
        subjectID: null, // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 区县
        direction: '', // 方向
        questionType: '单选', // 题型
        question: '', // 题干
        difficulty: '简单', // 难度
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: [], // 试题标签
        videoURL: '',
        // 循环结构
        options: [
          {
            code: 'A',
            isRight: true,
            title: '',
            img: ''
          },
          {
            code: 'B',
            isRight: false,
            title: '',
            img: ''
          },
          {
            code: 'C',
            isRight: false,
            title: '',
            img: ''
          },
          {
            code: 'D',
            isRight: false,
            title: '',
            img: ''
          }
        ]

      },
      // 学科列表
      depts: [],
      // 目录
      directoryList: [],
      // 企业列表
      dept: [],
      // 城市
      provincesList: [],
      // 区县
      cityList: [],
      // 方向
      directionList: direction,
      // 视频解构
      vide: null,
      // 试题标签
      scheduleList: [],
      questionType: [
        {
          value: '1',
          label: '单选'
        },
        {
          value: '2',
          label: '多选'
        },
        {
          value: '3',
          label: '简答'
        }
      ],
      difficulty: [
        {
          value: '1',
          label: '简单'
        },
        {
          value: '2',
          label: '一般'
        },
        {
          value: '3',
          label: '困难'
        }
      ],
      rules: {
        // 学科
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        // 目录
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        // 企业
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        // 城市
        province: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        // 方向
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        // 题型
        questionType: [
          { required: true, trigger: 'change' }
        ],
        // 难度
        difficulty: [
          { required: true, trigger: 'change' }
        ],
        // 题干
        question: [{ required: true, message: '请输入题干', trigger: 'change' }],
        // 答案解析
        answer: [{ required: true, message: '请输入答案', trigger: 'change' }]
      }
    }
  },
  async created () {
    // 学科
    const { data } = await simple()
    this.depts = data
    console.log(this.depts)
    // 企业列表
    const res = await list()
    this.dept = res.data.items
    console.log(this.dept)
    // 城市
    this.provincesList = await provinces()
    console.log(this.provincesList)
    // 区县
    this.city = await citys()
    console.log(this.city)
    // 回显调用
    if (this.$route.query.id) {
      this.edistFormData()
    }
  },
  methods: {
    // 手动校验
    btnOk () {
      const fn = this.isEdist ? update : add
      this.$refs.userForm.validate()
        .then(() => {
          return fn(this.formData)
        })
        .then(() => {
          this.$message.success(this.isEdist ? '修改成功' : '添加成功')
          this.$message.success('添加成功')
          if (!this.isEdist) {
            this.$router.push('list')
            return
          }
          this.$router.back()
        })
        .catch(() => {
          this.$message.error(this.isEdist ? '修改失败' : '添加失败')
        })
    },
    changeProvince (value) {
      // 清空区的数据
      this.formData.city = ''
      // 将对应市的区赋值遍历
      this.cityList = citys(value)
    },
    // 数据回显
    async edistFormData () {
      this.isEdist = true
      this.formData = (await detail({ id: this.$route.query.id })).data
    },
    // 添加选项
    addoptions () {
      this.num++
      const code = String.fromCharCode(65 + this.num)
      this.formData.options.push({
        code: code,
        isRight: 0,
        title: '',
        img: ''
      })
    },
    // 目录
    async hebinglist (val) {
      const { data } = await simplemulu({ subjectID: val })
      this.formData.catalogID = ''
      this.directoryList = data
    }
  }
}

</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  .box {
    background-color: #ffffff;
    // 试题录入
    .top {
      padding: 18px 20px;
      border-bottom: 1px solid #ebeef5;
      font-size: 16px;
    }
    .bto {
      padding: 20px 30px 20px 0;
      .bto-input2 {
        margin-left: 70px;
        margin-bottom: 28px;
        position: relative;
      }

      .bto-input3 {
        margin-left: 50px;
        margin-bottom: 28px;
        margin-right: 15px;
      }
      .bto-input4 {
        margin-left: 40px;
        margin-bottom: 28px;
        .quill {
          margin-left: 95px;
        }
      }
      .bto-input5 {
        margin-left: 40px;
        margin-bottom: 28px;
      }
      .bto-input {
        margin-left: 70px;
        margin-bottom: 28px;
        .el-select {
          margin-left: 10px;
        }
        .el-radio-group {
          margin-left: 10px;
        }
        .custom-upload {
          width: 50px;
          height: 50px;
        }
          content:none
         }
      }
    }
  }
.quill-editor {
  margin-left: 65px;
  ::v-deep .ql-editor {
    height: 200px;
  }
}
.marBto {
  margin-left: 24px;
  margin-bottom: 18px;
}
.marLeft{
  margin-left: 50px;
  margin-bottom: 13px;
  margin-top: -15px;
}
.bton {
  margin-left: 135px;
}
.close .el-button{
  font-size: 12px;
  margin-left: 135px;
}
.ipt-w {
  width: 400px;
  margin-left: 4px;
}
</style>
